<template>
  <div class="issue">
    <!-- 搜索 -->
    <div class="search">
      <el-input v-model="query.title" placeholder="请输入专题标题" clearable />
      <el-input v-model="query.subtitle" placeholder="请输入专题子标题" clearable />

      <el-select placeholder="请选择启用状态" v-model="query.sort" clearable>
        <el-option label="按序号排序" value="id"></el-option>
        <el-option label="按时间排序" value="add_time"></el-option>
        <el-option label="按价格排序" value="price"></el-option>
      </el-select>
      <el-button type="primary" icon="el-icon-search" @click="handleSearch">查找</el-button>
      <el-button type="primary" icon="el-icon-download" @click="exportClues">导出</el-button>
    </div>
    <div class="oo" style="float:right;margin-bottom: 10px;">
      <el-button type="primary" icon="el-icon-edit" @click="handAdd">添加</el-button>
      <el-button type="danger" @click="handDelete">批量删除</el-button>
    </div>
    <!-- 表单 -->
    <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column prop="title" label="专题标题" width="156" />
      <el-table-column prop="subtitle" label="专题子标题" width="347" />
      <el-table-column prop="picUrl" property="url" label="图片" width="152">
        <template slot-scope="scope">
          <el-image :src="scope.row.picUrl" :preview-src-list="[scope.row.picUrl]">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="floorPrice" label="专题详情" width="152">
        <template slot-scope="scope">
          <el-button type="text" @click="handView(scope.row)">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="低价" width="152">
      </el-table-column>
      <el-table-column prop="readCount" label="阅读数量" width="152">
      </el-table-column>
      <el-table-column fixed="right" label="操作" min-width="100">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handeEdite(scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="handleDel(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="page">
      <el-pagination :page-sizes="[10, 20, 30, 40, 50, 100]" :page-size="this.query.limit"
        layout="total, sizes, prev, pager, next, jumper" :total="total" background @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>
    <!-- 模态框 -->
    <el-dialog title="专题详情" :visible.sync="dialogVisible" width="50%" align="center">
      <div v-html="content"></div>
    </el-dialog>
  </div>
</template>
<script>
  import { listTopic, deleteTopic, batchDeleteTopic } from '@/api/topic'
  import * as XLSX from 'xlsx'
  export default {
    data() {
      return {
        // 参数
        query: {
          page: 1,
          limit: 20,
          sort: 'add_time',
          order: 'desc',
          title: null,
          subtitle: null
        },
        tableData: [], // / 列表数据
        total: null, // 当前页总数
        dialogVisible: false, // 模态框
        delId: [], //多选删除id
        content: '', //查看
        // 确定
        ruleForm: {
          question: null,
          answer: null
        }
      }
    },
    created() {
      this.getList()
    },
    methods: {
      // 渲染列表
      getList() {
        listTopic(this.query).then(res => {
          console.log('专题管理', res)
          this.tableData = res.data.data.list
          this.total = res.data.data.total
        })
      },
      // 添加
      handAdd() {
        this.$router.push('/promotion/topic-create')
      },
      // 编辑
      handeEdite(row) {
        this.$router.push(`/promotion/topic-edit?id=${row.id}`)
      },
      // 查看
      handView(row) {
        this.dialogVisible = true
        this.content = row.content
      },
      // 多选删除
      handleSelectionChange(val) {
        console.log(val);
        this.delId = []
        for (const item of val) {
          this.delId.push(item.id)
        }
        console.log(this.delId);

      },
      // 批量删除
      handDelete() {
        batchDeleteTopic({ ids: this.delId }).then(res => {
          console.log('批量删除成功', res)
          this.getList()
          this.$notify({
            title: '成功',
            message: '删除专题成功',
            type: 'success'
          })
        })
      },
      // 删除
      handleDel(row) {
        console.log(row)
        deleteTopic(row).then(res => {
          console.log('删除成功', res)
          this.getList()
          this.$notify({
            title: '成功',
            message: '删除专题成功',
            type: 'success'
          })
        })
      },
      // 分页器
      handleSizeChange(val) {
        // console.log(`每页 ${val} 条`);
        this.query.limit = val
        this.getList()
      },
      handleCurrentChange(val) {
        // console.log(`当前页: ${val}`);
        this.query.page = val
        this.getList()
      },
      // 导出
      exportClues() {
        // 点击导出的时候把现有数据生成一个新的数组 以中文作为key然后在导出
        let demo = [];
        for (let i = 0; i < this.tableData.length; i++) {
          let obje = {
            专题ID: this.tableData[i].id,
            专题标题: this.tableData[i].title,
            专题子标题: this.tableData[i].subtitle,
            专题内容: this.tableData[i].content,
            专题图片: this.tableData[i].picUrl,
            商品低价: this.tableData[i].price,
            阅读量: this.tableData[i].readCount,
            专题商品: this.tableData[i].readCount
          };
          demo.push(obje);
        }
        // console.log(demo);
        const worksheet = XLSX.utils.json_to_sheet(demo); //这里面传入要导出的表格数据
        const workbook = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(workbook, worksheet, "data"); //data为自定义表格名字
        XLSX.writeFile(workbook, "专题信息.xlsx"); //one.xlsx指的是文件名
      },
      // 搜索
      handleSearch() {
        this.getList()
      }
    }
  }
</script>
<style scoped lang="scss">
  ::v-deep.issue {
    padding: 20px;

    .search {
      display: flex;
      margin-bottom: 20px;
      background-color: re;

      .el-input {
        width: 200px;
      }
    }

    .el-textarea__inner {
      min-height: 201.3333px !important;
    }

    .el-dialog {
      -webkit-transform: none;
      transform: none;
      left: 0;
      position: relative;
      margin: 0 auto;
      box-shadow: 0 0 0px 3px rgb(0 0 0 / 50%);
      border-radius: 2px;
  }

    .el-table .cell {
      text-align: center;

    }

    .cell {
      img {
        width: 50px;

      }

      .yanse {
        background-color: #e8f4ff;
        border-color: #d1e9ff;
        color: #1890ff;
        padding: 5px;
        border-radius: 4px;
        font-size: 12px;
      }

    }

    .conter {
      padding: 30px 20px;
    }

    .el-dialog {

      .el-input {
        width: 50%;
      }

      .el-form-item__label {
        text-align: left;
      }
    }

    .el-input--suffix .el-input__inner {
      margin-right: 200px;
    }

    .el-button--text {
      color: #fff;
      display: inline-block;
      padding: 8px 13px;
      background-color: #1890ff;
    }

    .page {
      margin-top: 50px;
    }

    .el-table__body,
    .el-table__header {
      width: 100% !important;

    }

  }
</style>